<template>
    <div class="menu_header">
        <div class="title">
            <h3>
                <span><svg-icon name="OMSS" class="LOGO" />运维辅助管理系统</span>
            </h3>
        </div>
        <div class="icon" @click="isCollapse=!isCollapse">
            <el-icon><Menu/></el-icon>
        </div>
        <div class="right">
            <div class="select">
                <el-dropdown @command="commandHandle">
                    <span class="el-dropdown-link">
                        <!-- 3 获取登录的用户名 渲染 -->
                        {{ useStore.username }}
                        <el-icon class="el-icon--right">
                            <arrow-down/>
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="index">系统首页</el-dropdown-item>
                            <el-dropdown-item command="info">用户信息</el-dropdown-item>
                            <el-dropdown-item command="logout">退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { inject } from 'vue';
import { Menu } from '@element-plus/icons-vue';
import { ArrowDown } from '@element-plus/icons-vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
//1  导入状态管理
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'
//导入全局路由
import { useRouter } from 'vue-router';

//导入退出登录的方法
import { logout } from '@/common';

const isCollapse = inject('isCollapse')
// 2  获取状态管理和数据约束 
const useStore = useUserStore()

// 右上角功能 退出登录
const router =  useRouter()
const commandHandle  = (command: string | number | object) => {
    //   ElMessage(`click on item ${command}`)
    switch (command) {
        case 'index':
            // 跳转到系统首页
            router.push('/index')
            break;
        case 'info':
            // 跳转到用户信息
            router.push('/ums/user')
            break;
        case 'logout':
            //调用封装的common的退出登录方法   传递进去两个参数  标准
            logout(undefined,()=>{
                //提示
                ElMessage.success('退出成功')
             })
            
            break;
        default:
            break;
    }
}

</script>


<style scoped lang="less">
.menu_header{
    display: flex;
    height: 60px;
    width: 100%;
    //解决左边有空白
    align-items: center;
    justify-content: space-between;
    //向左在偏移20px
    padding-right: 60px;
    padding: 0 20px;
    background: #5592d8;
    // border-bottom: 1px solid #eee;
    .LOGO{
        //解决图标不在字体左侧问题
        display: inline-block;
        font-size: 20px;
        color: white;
        margin-right: 10px;
        font-size: 16px;
        vertical-align: middle;
        line-height: 1;
        transform: translateY(-1px);
        transition: all 0.3s;
    }
    .title{
        width: 200px;
        color: #121412;
        h2 {
            font-weight: normal;
        }
    }
    .icon{
        width: 16px;
        h3{
            font-size: 50px;
            font-weight: normal;
        }
        // text-align: center;
    }
    .right{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
       .el-icon{
           font-size: 15px;
           color: black;
           margin-left: 15px;
           margin-top: 10px;
           .el-icon--right{
              margin-left: 0px;
              font-size: 14px;
           }
       }
       .el-dropdown{
          display: flex;
          justify-content: space-between;
          align-items: center;
       }
    }

}
</style>